<template>
  <el-menu default-active="1-4-1" class="menu" :collapse="isCollapse" :router="true" @select="menuSelect">
    <template v-for="item in menuList" :index="item.id">
      <el-menu-item v-if="!item.children || item.children.length===0" :index="item.url" :route="item.url">
        <i :class="item.icon"></i>
        <span slot="title">{{item.title}}</span>
      </el-menu-item>
      <el-submenu v-else :index="item.id">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </template>
        <el-menu-item v-for="child in item.children" :key="child.id" :index="child.url" :route="child.url">{{child.title}}</el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
  export default {
    name: "menuBar",
    data() {
      return {
        menuList: [
          {
            id: '1',
            title: '首页',
            icon: 'el-icon-menu',
            url: '/home'
          },
          {
            id: '2',
            title: '分组菜单',
            icon: 'el-icon-location',
            children: [
              {
                id: '2-2',
                title: '分组1',
                icon: 'el-icon-location',
                url: '/group/group1'
              }
            ]
          },
          {
            id: '3',
            title: '增删改查组件',
            icon: 'el-icon-search',
            url: '/searchComponent'
          }
        ]
      }
    },
    computed: {
      isCollapse() {
        return this.$store.state.isCollapse;
      }
    },
    methods: {
      menuSelect(index, path) {
        console.log(index, path);
        this.$router.push(path)
      },
      handleOpen() {},
    }
  }
</script>

<style scoped>
  .menu{
    text-align: left;
  }
  .menu:not(.el-menu--collapse){
    width: 200px;
    height: 100%;
  }
</style>
